<template>
    <div>
        <table id="tabottom">
            <tr>
                <th>
                    <label for="all">全选</label>
                    <input id="all" v-model="checkAll" type="checkbox" @click="handleChenckAllChange">
                </th>
                <th>产品图片</th>
                <th>编号</th>
                <th>品牌名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) of goodsList" :key="item.id">
                <td>
                    <input type="checkbox" v-model="checkArr" :value="item"/>
                </td>
                <td>
                    <img height="80" :src="item.imgs" alt="">
                </td>
                <td>
                    {{item.code}}
                </td>
                <td>
                    {{item.title}}
                </td>
                <td>
                    {{item.price}}
                </td>
                <td>
                    <button @click="decrement(item)">-</button>
                    &nbsp;
                    <b>{{item.count}}</b>
                    &nbsp;
                    <button @click="increment(item)">+</button>
                </td>
                <td>
                    <button @click="del(index)">删除</button>
                </td>
            </tr>
        </table>
        <div class="total add">
            <h1 style="text-align:center">总价格:
                <b style="color:red">{{total}}</b>
            </h1>
        </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                checkArr: [],
                checkAll:false,    
                // total:"0.00",  
            }
        },
        computed:{
            total(){
                // 未勾选商品
                if(this.checkArr.length == 0){
                    return "0.00"
                }else{
                    return this.checkArr.reduce((total,item) => {
                        return total += item.price * item.count
                    },0).toFixed(2)
                }
            }
        },
        watch:{
            // 观察checkAll的变化，只要checkAll的数组长度和goodsList的数组长度相等，说明全部被选中，需要把checkAll的的值为true，不然就设置为false
            checkArr(newCheckArr){
                // console.log(newVal);
                if(this.goodsList.length === newCheckArr.length){
                    // 需要将checkAll设置为true
                    this.checkAll = true;
                }else{
                    // 没有被全选
                    this.checkAll = false;
                }
            },
            target:{
                handler(newVal){ // 响应props target数据的变化
                    console.log(newVal);
                    // 删除checkArr对应的数据就可以了

                    let id = newVal.id;  // 传递过来的被删除的id
                    console.log(this.checkArr);
                    // 过滤掉当前数组中id和传过来id相等的对象
                    this.checkArr = this.checkArr.filter(item=>{
                        return item.id !== id
                    })
                },
                deep:true
            }
        },
        methods:{
            // 处理点击全选按钮的逻辑
            handleChenckAllChange(e){
                // console.log(123);
                // console.log(e.target.checked);
                let checked = e.target.checked;
                // 直接判断newVal，如果是true，表示需要全选了
                // 应该让checkArr等于goodsList

                // 主动点击全选的时候，让列表选中和不选中
                // 让我们是通过逻辑去设定checkAll的时候，就不要控制列表是否选中了
                if(checked){
                    this.checkArr = this.goodsList;
                }else{
                    this.checkArr = [];
                }
            },
            // 删除逻辑
            del(index){
                // console.log(this.target);
                this.$emit('del',index) 
            },
            // 点击数量减少按钮
            decrement(item){
                if(item.count==0){
                    return
                }
                item.count--
            },
            // 点击数量增加按钮
            increment(item){
                item.count++
            },
        },
        props:{
            // 接受被删除的数据
            target:{
                type:Object,  
            },
            // 接受的数据
            goodsList:{
                type: Array,
                defaulet(){
                    return [];
                }
            }
        },
    }
</script>